<template>
  <div>
    <!--------------------------------------------- 主页面 --------------------------------------------->
    <el-table v-loading="loading" :data="ProductAudit">
      <el-table-column
        label="商品名称"
        align="center"
        prop="name"
        :show-overflow-tooltip="true"
        width="280"
      />

      <el-table-column label="商品价格" align="center" prop="price" width="120" />
      <el-table-column label="商品图片" align="center" prop="image" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="" style="width: 80px; height: 80px" />
        </template>
      </el-table-column>
      <el-table-column label="商品详情" align="center" prop="detail" width="200" />
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          {{ getStatusLabel(scope.row.auditStatus) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="button-container" v-if="scope.row.auditStatus === 0">
            <el-button size="mini" type="primary" @click="agree(scope.row.id)" class="control-button">同意</el-button>
            <el-button size="mini" type="primary" @click="refuse(scope.row.id)" class="control-button">拒绝</el-button>
          </div>
          <el-tag v-if="scope.row.auditStatus !== 0">无可用操作</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  shelvesProduct,
  awaitAudit,
  audit,
} from "@/api/product";
import { addMiaosha } from "@/api/goods";
import { MessageBox } from "element-ui";

export default {
  name: "Product",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 商品表格数据
      ProductAudit: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 查询商品列表 */
    getList() {
      this.loading = true;
      awaitAudit()
        .then((response) => {
          this.ProductAudit = response.data;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getStatusLabel(auditStatus) {
      if (auditStatus === 0) {
        return "待审核";
      } else if (auditStatus === 1) {
        return "审核通过";
      } else if (auditStatus === 2) {
        return "未过审";
      }
    },
    agree(id) {
      let _this = this;
      audit(id, 1)
        .then(function (response) {
          if (response.code === 200) {
            _this.getList();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    refuse(id) {
      let _this = this;
      audit(id, 2)
        .then(function (response) {
          if (response.code === 200) {
            _this.getList();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.version-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  ::v-deep {
    * {
      display: inline;
    }

    p {
      margin: 0;
    }
  }
}

.el-form-item {
  margin-bottom: 20px !important;
}

.version-content-title {
  ::v-deep {
    p {
      margin: 1em;
      line-height: 1.5;
    }
  }
}

.el-main {
  line-height: normal;
}

.button-container {
  display: flex;
  justify-content: space-between; /* Or you could use: justify-content: center; */
}

.control-button {
  margin-right: 2px; /* Adjust as desired. This adds space to the right of each button. */
}
</style>

<style>
.el-main {
  line-height: normal;
}
</style>